<template>
	<div>
		<Layout class="app-frame" v-if="!loading" :siderCollapsed="siderCollapsed" :siderFixed="true">
			<Sider theme="white">
				<div class="app-menu">
					<div class="app-logo">
						<router-link :to="{path:'/'}">
							<span class="app-logo-icon"><img :src="$global.config.logo || $publicPath+'static/logo.png'" /></span>
							<span class="app-logo-text">{{$global.config.name || '企蝶'}}</span>
						</router-link>
					</div>
					<Menu :option="{titleName:'name',keyName:'path'}" :datas="menus" :inlineCollapsed="siderCollapsed" @select="triggerSelect"
					 @click="leftMenu" ref='menu' className="h-menu-white"></Menu>
					<div class="app-menu-mask" @click="hideMenu"></div>
				</div>
			</Sider>
			<Layout :headerFixed="true">
				<HHeader theme="white">
					<div class="app-header">
						<div style="width:50px;float:left;"><Button icon="h-icon-menu" size="l" noBorder class="font20" @click="siderCollapsed=!siderCollapsed"></Button></div>
						<div class="float-right app-header-info">
							<div class="app-header-icon-item" @click="tabs=!tabs" title="快捷导航">
								<i :class="tabs ? 'icon quanpingmu' : 'icon suoxiao'"></i>
							</div>
							<div class="app-header-icon-item" @click="huyanMode" title="护眼模式">
								<i :class="huyan ? 'icon yanjing' : 'icon yanjing2'"></i>
							</div>
							<div class="app-header-icon-item" @click="doReload" title="刷新">
								<i class="icon shuaxin1"></i>
							</div>
							<div class="app-header-icon-item">
								<Avatar :src="$publicPath+'static/avatar.png'" :width="30"><span>管理员</span></Avatar>
							</div>
						</div>
					</div>
				</HHeader>
				<SysTabs :hidden="tabs" ref="sysTabs" :home="{name:'工作台',path:'/'}"></SysTabs>
				<Content>
					<div class="app-frame-content">
						<router-view ref="child"></router-view>
					</div>
					<HFooter>
						<div class="app-footer">
							Copyright © 2019-2021 HuanTu. All Rights Reserved.
						</div>
					</HFooter>
				</Content>
			</Layout>
		</Layout>
	</div>
</template>

<script>
	import SysTabs from '@/components/sys-tabs';
	export default {
		components: {
			SysTabs
		},
		data() {
			return {
				huyan: false,
				loading: false,
				tabs: false,
				siderCollapsed: false,
				menus: [{
						name: '工作台',
						path: '/',
						icon: 'icon zhuye'
					},
					{
						"name": "用户管理",
						"path": "/user/list",
						"icon": "icon duoren"
					}, {
						"name": "产品管理",
						"path": "/product/list",
						"icon": "icon libao"
					}, {
						"name": "订单管理",
						"path": "/order/list",
						"icon": "icon biaoge"
					},  {
						"name": "表单管理",
						"path": "/formorder/list",
						"icon": "icon biaodanbiaoqian"
					},{
						"name": "系统管理",
						"path": "/system",
						"icon": "icon diannao",
						"children": [{
							"name": "基本配置",
							"path": "/config",
							"icon": "icon shezhi"
						}, {
							"name": "类目设置",
							"path": "/cate/list",
							"icon": "icon shebeimingcheng"
						}, {
							"name": "表单配置",
							"path": "/form/list",
							"icon": "icon bianji1"
						},{
							"name": "页面设计",
							"path": "/style/list",
							"icon": "icon shouji"
						}]
					}
				]
			}
		},
		watch: {
			$route() {
				this.menuSelect()
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			huyanMode() {
				if (this.huyan) {
					document.getElementsByTagName('body')[0].removeAttribute('class', 'huyan')
				} else {
					document.getElementsByTagName('body')[0].className = 'huyan'
				}
				this.huyan = !this.huyan
			},
			async getData() {
				this.loading = true
				this.$global.config = await this.$api('GET', 'config')
				this.loading = false
				document.title = this.$global.config.name
				setTimeout(this.menuSelect, 300)
			},
			doReload() {
				this.$refs.child.getData(false)
			},
			menuSelect() {
				this.menus.forEach(v => {
					if (v.children) {
						v.children.forEach(vv => {
							if (vv.path == this.$route.fullPath) {
								this.triggerSelect(vv)
							}
						})
					}
				})
				if (this.$route.fullPath) {
					this.$refs.menu.select(this.$route.fullPath)
				}
			},
			triggerSelect(menu) {
				this.$refs.sysTabs.addTab({
					name: menu.name,
					path: menu.path
				})
			},
			leftMenu(data) {
				if (data.children.length > 0) return;
				this.$router.push({
					path: data.key
				})
			},
			hideMenu() {
				this.$store.commit('updateSiderCollapse', true);
			}
		}
	}
</script>

<style lang="less">
	.huyan {
		min-height: 100vh;
		height: 100%;
		filter: brightness(90%);
		background: #c7edcc;
	}

	.common-list-container {
		.common-list-item {
			align-items: center;
			display: flex;
			padding: 0 10px;
			border-bottom: 1px solid #eeeeee;

			.common-list-meta {
				flex: 1;
			}
		}
	}

	.app-header {
		color: rgba(49, 58, 70, 0.8);

		.h-autocomplete {
			line-height: 1.5;
			float: left;
			margin-top: 15px;
			margin-right: 20px;
			width: 120px;

			&-show,
			&-show:hover,
			&-show.focusing {
				outline: none;
				box-shadow: none;
				border-color: transparent;
				border-radius: 0;
			}

			&-show.focusing {
				border-bottom: 1px solid #eee;
			}
		}

		&-info &-icon-item {
			cursor: pointer;
			display: inline-block;
			float: left;
			padding: 0 15px;
			height: 60px;
			line-height: 60px;
			margin-right: 10px;

			&:hover {
				background: #f8f8f8;
			}

			i {
				font-size: 18px;
			}

			a {
				color: inherit;
			}

			.h-badge {
				margin: 20px 0;
				display: block;
			}
		}

		.h-dropdownmenu {
			float: left;
		}

		&-dropdown {
			float: right;
			margin-left: 10px;
			padding: 0 20px 0 15px;

			.h-icon-down {
				right: 20px;
			}

			cursor: pointer;

			&:hover,
			&.h-pop-trigger {
				background: #f8f8f8;
			}

			&-dropdown {
				padding: 5px 0;

				.h-dropdownmenu-item {
					padding: 8px 20px;
				}
			}
		}

		&-menus {
			display: inline-block;
			vertical-align: top;

			>div {
				display: inline-block;
				font-size: 15px;
				padding: 0 25px;
				color: #333333;

				&:hover {
					color: #3788ee;
				}

				+div {
					margin-left: 5px;
				}

				&.h-tab-selected {
					color: #ffffff;
					background-color: #3788ee;
				}
			}
		}

		.app-header-message-vue {
			float: left;
			margin-right: 15px;

			.h-dropdowncustom-show {
				height: 60px;

				.app-header-icon-item {
					margin-right: 0;
				}

				&.h-pop-trigger {
					background: #f8f8f8;
				}
			}
		}
	}

	.app-menu {
		.h-menu {
			font-size: 14px;

			.h-menu-li-selected {
				.h-menu-show:after {
					width: 4px;
				}
			}

			>li>.h-menu-show {
				font-size: 15px;

				.h-menu-show-icon {
					font-size: 20px;
				}

				.h-menu-show-desc {
					transition: opacity 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
				}
			}
		}

		.h-menu.h-menu-size-collapse>.h-menu-li>.h-menu-show {
			padding-left: 24px;

			.h-menu-show-icon {
				font-size: 20px;
			}
		}

		.h-menu.h-menu-white {
			color: rgb(49, 58, 70);
		}
	}

	.app-logo {
		font-family: Arial;
		padding: 0px 24px;
		margin-bottom: 30px;
		line-height: 60px;
		height: 60px;
		overflow: hidden;
		white-space: nowrap;
		transition: padding .3s;

		.app-logo-text {
			font-size: 20px;
			vertical-align: middle;
		}

		.app-logo-icon {
			img {
				height: 30px;
				width: 30px;
				display: inline-block;
				margin-right: 10px;
				transition: .3s;
				vertical-align: middle;
			}
		}
	}

	.h-layout-sider-collapsed {
		.app-logo-text {
			display: none;
		}

		.app-logo-icon {
			margin-left: 0;
		}
	}

	.app-frame-content {
		margin: 20px;
	}

	.app-footer {
		text-align: center;
		padding: 10px 0 30px;
		font-size: 10px;
		color: #ddd;
	}
</style>
